<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #iphone {
            height: 500px;
            width: 300px;
            position: relative;
            margin: 10px auto;
            background-color: rgba(0, 100, 0, 0.3);
        }

        #iphone #box {
            position: absolute;
            height: 40px;
            width: 80px;
            left: 0;
            bottom: 50px;
            background-color: red;
        }

    </style>
</head>
<body>
<div id="iphone">
    <div id="box">滑动解锁</div>
</div>
</body>
<script>
    var box = document.getElementById("box");
    var iphone = document.querySelector("#iphone");
    var iphpneLeft = parseInt(getStyleAttr(iphone, "margin-left"));
    var iphoneWidth = parseInt(getStyleAttr(iphone, "width"));
    var boxWidth = parseInt(getStyleAttr(box, "width"));
    var maxX = iphoneWidth - boxWidth;
    box.onmousedown = function (e) {//滑动事件 需要按下之后才应该触发
        var evt = window.event || e;

        var distanceX = evt.clientX - iphpneLeft;
        box.onmousemove = function (e) {
            var evt = window.event || e;
            var clintX = evt.clientX;
            var x = clintX - distanceX - iphpneLeft;
            if (x <= 0) {
                x = 0;
            }
            if (x >= maxX) {
                x = maxX;
                box.style.display = "none";
                box.onmousemove = null;
                iphone.style.backgroundColor = "red";
            }
            box.style.left = x + "px";
        }
    }

    function getStyleAttr(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj)[attr];
        }

    }

</script>
</html>